/* 学习报告 */

.container {
  width: 1000px;
  margin: 80px auto 0;
  ::v-deep .el-breadcrumb__inner.is-link {
    font-weight: normal;
    color: #333;
  }
  ::v-deep .el-breadcrumb__inner.is-link:hover {
    color: #0193ff;
  }
  ::v-deep .el-breadcrumb__inner a:hover {
    color: #0193ff;
  }
  .mainBox {
    width: 1000px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 15px 30px;
    .tit {
      text-align: center;
      h5 {
        font-size: 24px;
        color: $color-black;
        font-weight: 550;
      }
      p {
        font-size: 14px;
        color: #666;
        margin-top: 20px;
      }
    }
    .partTit {
      color: #000;
      font-weight: 550;
      margin-bottom: 10px;
    }
    .studySituation {
      margin-top: 20px;
      .situList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 320px;
          height: 83px;
          background-color: #f0f6fa;
          border-radius: 10px;
          padding: 15px 10px;
          box-sizing: border-box;
          & > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            & > div {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              img {
                margin-right: 5px;
              }
              p {
                font-size: 14px;
                color: $color-black;
                .bfb {
                  font-weight: 550;
                }
                span {
                  color: #000033;
                  padding: 0 3px;
                  font-weight: 520;
                }
              }
            }
          }
        }
      }
    }
    .videoMission {
      margin-top: 20px;
      .box {
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        border: solid 1px #eeeeee;
        padding: 25px 5px 0 5px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .left {
          width: 240px;
          .complete {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            p {
              font-size: 14px;
              color: $color-black;
              span {
                color: #0193ff;
              }
            }
          }
          .progress {
            display: flex;
            justify-content: center;
            margin-top: 45px;
            ::v-deep .el-progress__text {
              font-size: 36px !important;
              color: $color-black;
            }
          }
          .progressIns {
            width: 170px;
            margin: 32px auto 0;
            display: flex;
            justify-content: space-between;
            p {
              font-size: 14px;
              color: $color-black;
              position: relative;
              text-indent: 20px;
              &::after {
                content: '';
                width: 14px;
                height: 14px;
                background: #0193ff;
                position: absolute;
                top: 3px;
                left: 0;
              }
              &:last-child {
                &::after {
                  background: #e6eff6;
                }
              }
            }
          }
        }
        .right {
          width: 720px;
          .tabs {
            width: fit-content;
            background-color: #eef0f4;
            border-radius: 5px;
            display: flex;
            p {
              padding: 6px 18px;
              background: #eef0f4;
              border-radius: 5px;
              font-size: 14px;
              color: $color-black;
              text-align: center;
              cursor: pointer;
              &.act {
                background: #0193ff;
                color: #fff;
              }
            }
          }
          .listBox {
            width: 100%;
            height: 330px;
            background-color: #ffffff;
            box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
            border-radius: 10px;
            padding: 15px 0 0 16px;
            box-sizing: border-box;
            margin-top: 8px;

            .inner {
              width: 100%;
              max-height: 300px;
              overflow-y: auto;
              // 滚动条样式
              &::-webkit-scrollbar {
                width: 10px;
              }
              // 滚动槽
              &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #f2f2f2;
              }
              // 滚动滑块
              &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: #b4bbc5;
              }
              .item {
                width: 667px;
                padding-bottom: 16px;
                border-bottom: 1px dashed #eaeaea;
                margin-bottom: 18px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                  width: 100px;
                  font-size: 14px;
                  color: $color-black;
                  text-align: center;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  &.name {
                    width: 150px;
                    text-align: left;
                  }
                  span {
                    color: #0193ff;
                  }
                }
                a {
                  font-size: 14px;
                  color: #0193ff;
                }
              }
            }
          }
        }
      }
    }
    .testMission {
      margin-top: 20px;
      .chartBox {
        height: 360px;
        display: flex;
        justify-content: space-between;
        .chartItem {
          height: 100%;
          h5 {
            font-size: 14px;
            color: $color-black;
            font-weight: 550;
            margin: 30px 0;
          }
          #chart1 {
            width: 490px;
            height: 350px;
          }
          #chart2 {
            width: 490px;
            height: 350px;
          }
        }
      }
    }
    .assessment {
      display: flex;
      justify-content: space-between;
      margin-top: 85px;
      .left {
        .chartBox {
          width: 660px;
          height: 620px;
          border-radius: 10px;
          border: solid 1px #eeeeee;
          box-sizing: border-box;
          .assInfo {
            width: 526px;
            height: 135px;
            background-color: #eef0f4;
            border-radius: 10px;
            margin: 30px auto;
            padding: 20px 39px;
            box-sizing: border-box;
            p {
              font-size: 14px;
              color: $color-black;
              margin-bottom: 5px;
              span {
                color: #0193ff;
              }
            }
          }
        }
      }
      .rankBox {
        .rankList {
          width: 322px;
          // height: 620px;
          border-radius: 10px;
          border: solid 1px #eeeeee;
          padding: 30px 6px 20px 15px;
          .top {
            padding-bottom: 26px;
            border-bottom: 1px solid #eee;
            p {
              font-size: 14px;
              color: $color-black;
              margin-right: 18px;
              display: inline-block;
              cursor: pointer;
              &.act {
                color: #0193ff;
              }
            }
          }
          .list {
            max-height: 500px;
            overflow-y: auto;
            padding-right: 8px;
            margin-top: 24px;
            // 滚动条样式
            &::-webkit-scrollbar {
              width: 10px;
            }
            // 滚动槽
            &::-webkit-scrollbar-track {
              border-radius: 10px;
              background: #f2f2f2;
              // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            }
            // 滚动滑块
            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              background: #b4bbc5;
              // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            }
            .item {
              display: flex;
              align-items: center;
              padding-bottom: 20px;
              border-bottom: 1px solid #eaeaea;
              margin-bottom: 20px;
              position: relative;
              .rankNum {
                width: 43px;
                height: 43px;
                background-color: #f5f5f5;
                border-radius: 15px 15px 0px 15px;
                border: solid 1px #cccccc;
                display: flex;
                justify-content: center;
                align-items: center;
                .inner {
                  width: 31px;
                  height: 31px;
                  border-radius: 10px 10px 0px 10px;
                  border: solid 1px #cccccc;
                  text-align: center;
                  line-height: 31px;
                  font-size: 14px;
                  color: #999;
                }
                &.rankTop {
                  border-width: 0;
                  background: none;
                  font-size: 20px;
                  color: #666;
                  .inner {
                    border-width: 0;
                  }
                }
              }
              // .ranking{
              // }
              .avatar {
                width: 57px;
                height: 57px;
                border-radius: 50%;
                margin: 0 14px 0 14px;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .text {
                width: 130px;
                p {
                  font-size: 14px;
                  color: #444546;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  &:last-child {
                    color: #999;
                    margin-top: 15px;
                  }
                }
              }
              .isMe {
                width: 36px;
                height: 20px;
                background-color: #0193ff;
                border-radius: 3px;
                font-size: 14px;
                color: $color-white;
                text-align: center;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: auto;
                right: 0;
              }
            }
          }
        }
      }
    }
  }
}
